<template>
  <el-form ref="form" :model="form" label-width="80px">
    <div v-for="(item, index) in formData" :key="index">
      <div v-if="item.type == 'input'">
        <el-form-item :label="item.label" :rules="item.required">
          <el-input
              v-model="item.value"
              :name="item.name"
              :placeholder="item.placeholder"
          ></el-input>
        </el-form-item>
      </div>

      <div v-else-if="item.type == 'select'">
        <el-form-item :label="item.label" :rules="item.required">
          <el-select v-model="item.value">
            <div v-for="(v, i) in item.data" :key="i">
              <el-option :label="v" :value="v"></el-option>
            </div>
          </el-select>
        </el-form-item>
      </div>

      <div v-else-if="item.type == 'textarea'">
        <el-form-item :label="item.label" :rules="item.required">
          <el-input
              type="textarea"
              v-model="item.value"
              :name="item.name"
          ></el-input>
        </el-form-item>
      </div>

      <div v-else-if="item.type == 'switch'">
        <el-form-item :label="item.label" :rules="item.required">
          <el-switch v-model="item.value" name="item.name"></el-switch>
        </el-form-item>
      </div>

      <div v-else-if="item.type == 'checkbox'">
        <el-form-item :label="item.label" :rules="item.required">
          <el-checkbox-group v-model="item.value">
            <el-checkbox
                v-for="v in item.data"
                :label="v"
                :key="v"
                :name="item.name"
            ></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </div>

      <div v-else-if="item.type == 'radio'">
        <el-form-item :label="item.label" :rules="item.required">
          <el-radio-group v-model="item.value">
            <el-radio v-for="v in item.data" :label="v" :key="v"></el-radio>
          </el-radio-group>
        </el-form-item>
      </div>
      <div v-else-if="item.type == 'datePicker'">
        <el-form-item :label="item.label" :rules="item.required">
          <el-date-picker
              v-model="item.value"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
      </div>
    </div>

    <el-form-item>
      <el-button type="primary" @click="onSubmit">提交</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>

export default {
  name: "editForm",
  props: ["formData", "form"],
  data() {
    return {
      currentSort: "",
    };
  },
  methods: {
    // onSubmit() {
    //   console.log(this.formData)
    //   submitEdit(this.formData).then(response => {
    //     console.log(response)
    //     this.$message(response.msg)
    //   }).catch(error => console.log(error))
    // },
  },
};
</script>

<style scoped>
</style>
